
<!-- 采用html5  -->
<!DOCTYPE html>
<html>

  <head>

    <meta charset="UTF-8">

    <!-- 页面显示适应移动设备 -->
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no" >

    <title>我的APP</title>
    <link rel="stylesheet" href="resources\we-vue\style.css">
    <link rel="stylesheet" href="resources\css\font-awesome.min.css">
    <style>
        /*元素选择器*/

        html{
            height:100%;
        }
        body{

            height:100%;
            padding:0px;/*内边距*/
            margin:0px;/*外边距*/
        }
        
        /* 类选择器 */
        .my-container{

            width:100%;
            height:100%;
            /*background-color: #f0f0f0;*/
            background-image:url('resources/images/work2.jpg');
            background-repeat: no-repeat;
            background-size: 100% 100%;

        }

       

        .my-title{

            font-size:55px;
            text-align: center;/*水平居中*/

            color:rgb(124, 196, 214);
            font-weight:bold;/*文字加粗*/

            text-shadow:2px 15px 10px #a8c8ca;

            padding-top:25%;
            padding-bottom:40px;


        }
        .zhuce{
            padding-left: 15%;
            font-size:16px;
            color: #aaaaaa;

        }
        .chongzhi{
            padding-right: 15%;
            font-size:16px;
            color: #aaaaaa;
        }
    
        .my-footer{

            text-align: center;
            color:#AAAAAA;

            margin-top:80px;

        }

    
    </style>


  </head>  


  <body>

    <!-- div ：举行区域 -->
    <div id="app"  class="my-container"  >


        <div class="my-title">实验测试</div>

        <div style="padding-left:3px;padding-right:3px;box-sizing: border-box;" >
            <wv-group >
                <wv-input label="帐号" placeholder="请输入帐号" v-model="emp.e_id" ></wv-input>
                <wv-input label="密码" placeholder="请输入密码" type="password"v-model="emp.e_pwd" ></wv-input>
            </wv-group>
            <div style="display: flex; flex-direction: row; justify-content: space-between; ">
            <div class="zhuce" @click="zc">  注册 </div>
            <div class="chongzhi"@click="cz">  忘记密码？ </div>
        </div>

            <wv-button type="primary" @click="login" style="margin-top:10px;">登录</wv-button>
            <wv-button type="warn" @click="window.location.href='set.html'; " style="margin-top:10px;">设置</wv-button>
        </div>
        

        <div >
                <img style="width:40px;height:40px; " src="resources\images\work2.jpg" >
        </div>
     
                <div class="page">
                  <wv-footer class="footer-demo" text="Copyright © 2017 wevue.org"></wv-footer>
            
                </div>
         
              
             
        

    </div>

  </body>
  <script src="resources\js\vue.min.js"></script>
  <script src="resources\js\jquery.min.js"></script>
  <script src="resources\we-vue\index.js"></script>
  <script src="resources\layer_mobile\layer.js"></script>
  <script src="resources\js\my.js"></script>
  <script>
new Vue({
    el:'#app',
    data:{
        emp:{
            e_id:'',
            e_pwd:''
        }
       },
       methods:{
           zc(){
            window.location.href='zc.html';
           },
        cz(){
            window.location.href='cz.html';
           },
              login(){
                  if(this.emp.e_id==''){
                    //Toast.fail('请输入帐号！');
                    TopTips('请输入帐号！');
                    return;
                  }

                  if(this.emp.e_pwd==''){
                    //Toast.fail('请输入密码！');
                    TopTips('请输入密码！');
                    return;
                  }
                     //url='http://localhost:8081/myoa/login.jsp';
                  
                  //设置服务器参数
                 
                  
                  //服务器执行操作
                  Serv.operate(
                      {
                          url:'/login.jsp',
                          data:this.emp
                      },
                      ()=>{//箭头函数
                        setTimeout(() => {//通过js向另一个页面跳转
                        window.location.href='home.html';
                            
                        }, 500);
                        
                      }
                  );
                  
              }
          }
 });
  </script>


</html>